<template>
  <div class="box">
    <h1>综合案例</h1>
    <div class="table">
      <div class="row header">
        <span>序号</span>
        <span>书籍名称</span>
        <span>出版日期</span>
        <span>价格</span>
        <span>购买数量</span>
        <span>操作</span>
      </div>
      <div class="row" v-for="(item, index) in list" :key="index">
        <span>{{ index + 1 }}</span>
        <span>{{ item.title }}</span>
        <span>{{ item.date }}</span>
        <span>￥ {{ item.price }}</span>
        <span>
          <button :disabled="item.count <= 1" @click="reduce(index)">-</button>
          {{ item.count}}
          <button @click="increase(index)">+</button>
        </span>
        <span>
          <button>删除</button>
        </span>
      </div>
    </div>
    <i>总计: ￥ {{ total }}</i>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
const list = ref([
  { title : 'JavaScript高级程序设计', date: '2020-01-01', price: 30, count: 1 },
  { title : 'Vue.js权威指南', date: '2020-01-01', price: 20, count: 1 },
  { title : 'CSS揭秘', date: '2020-01-01', price: 10, count: 1 }
])
const total = computed(() => {
  let sum = 0;
  list.value.forEach(item => {
    sum += item.price * item.count;
  })
  return sum;
})

const increase = (index) => {
  list.value[index].count++;
}

const reduce = (index) => {
  if (list.value[index].count > 0) {
    list.value[index].count--;
  }
}

</script>

<style scoped>
.box {
  margin: 0 auto;
  width: 800px;
  padding: 10px;
}
h1 {
  padding: 10px 0;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 10px 0;
}
.row span {
  flex: 1;
  text-align: center;
  height: 100%;
}

.header {
  background-color: #f5f5f5;
  border-right: 1px solid #ccc;
  height: 40px;
  line-height: 40px;
}
.header span:last-child {
  border-right: none;
}
.table .row:last-child {
  border-bottom: 1px solid #ccc;
}
button {
  padding: 2px 6px;
}
i {
  margin-top: 10px;
}
</style>